<template>
  <div class="comment-score">
    <span
      v-for="i in total"
      :key="i"
      @click="setScore(i)"
      @mouseenter="currentScore = i"
      @mouseleave="currentScore = value"
      class="iconfont"
      :class="currentScore < i ? ['icon-xin'] : ['icon-xin2', 'active']"
    ></span>
    <span class="text">{{textMap[currentScore]}}</span>
  </div>
</template>

<script>
export default {
  props: {
    value: {
      type: Number,
      default: 0
    }
  },
  data () {
    return {
      total: 5,
      currentScore: this.value,
      textMap: {
        1: '非常差',
        2: '差',
        3: '一般',
        4: '好',
        5: '非常好'
      }
    }
  },
  methods: {
    setScore (i) {
      this.$emit('input', i)
      this.$emit('change', i)
    }
  }
}
</script>

<style scoped lang='less'>
.comment-score {
  .iconfont {
    margin-right: 10px;
    vertical-align: middle;
    cursor: pointer;
    &.active {
      color: #ff9240;
    }
  }
  .text {
    vertical-align: middle;
  }
}
</style>
